<template>
  <div id="header">
    <div class="header-left">
      <!-- 按钮 -->
      <el-button
        @click="handleClick"
        icon="el-icon-menu"
        round
        size="mini"
      ></el-button>
      <!-- 面包屑 -->
      <span class="text">
        <el-breadcrumb separator="/">
          <!-- 修饰符 .native --  可用于监听组件根元素的原生事件 -->
          <el-breadcrumb-item
            @click.native="toPathClick(item)"
            v-for="item of tags"
            :key="item.path"
            :to="{ path: item.path }"
            :replace="false"
            >{{ item.label }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </span>
    </div>
    <div class="header-right">
      <!-- 下拉菜单 -->
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <img class="user-pic" src="../assets/images/user.jpg" alt="" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
// 第二种获取store实例数据的方法
// 通过辅助函数获取
import { mapState } from "vuex";
import Cookie from 'js-cookie'
export default {
  name: "CommonHeader",
  methods: {
    handleClick() {
      this.$store.commit("collapseMenu");
    },
    // 下拉菜单方法
    handleCommand(command) {
      // 登出选项
      if (command === 'logout') {
        Cookie.remove('token');
        Cookie.remove('menu');
        this.$router.push({ name: 'login' });
      }
    },
    // 容错处理
    toPathClick(item) {
      if (this.$route.path === item.path) {
        return;
      }
    },
  },
  // 辅助函数需要在计算属性中调用
  computed: {
    // 返回的是一个对象,需要用扩展运算符 - ... 来解构
    ...mapState({
      tags: (state) => state.tab.tabsList,
    }),
  },
  created() {
    // 测试tags是否存在
    console.log(this.tags, "tags");
  },
};
</script>

<style lang="less" scoped>
#header {
  height: 60px;
  padding: 0 20px;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    display: flex;
    align-items: center;
    // 注意,不生效的原因是vue会对css样式进行处理,
    // 添加vue的标识,如果没有该标识,
    // 则需要添加/deep/来使其生效
    /deep/.el-breadcrumb__item {
      .el-breadcrumb__inner {
        &.is-link {
          color: #666;
        }
      }
      // 找到当前span标签的最后一个子标签
      &:last-child {
        .el-breadcrumb__inner {
          color: #fff;
        }
      }
    }
  }
  .text {
    color: #fff;
    font-size: 14px;
    margin-left: 20px;
  }
  .user-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
